<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    父子组件通信
      想要把父组件的数据传递给子组件时使用
      父子通信需要依赖于props
      1 先在子组件上添加props属性
      {
        props: ['自定义名字'] // 一旦添加了该属性，那么对应的组件标签上就会有对应的属性名供我们传递数据
      }

      2 找到父组件模板中的子组件标签
      template: `
        <ul>
          <movieItem m="1"></movieItem>  // 表示给这个组件传递进去的就是1
          <movieItem m="2"></movieItem>  // 表示给这个组件传递进去的就是2
          
        </ul>
      `
    
      3 子组件中接受到对应的m数据，可以把其当作data直接使用
      子组件模板
      template: `
        <li>{{m}}</li>
      `


   -->
  <div id="app">
    <ul>
      <li v-for="movie in movies">{{movie}}</li>
    </ul>

    <hr>

    <movie-list></movie-list>

  </div>

  <script src="./vue.js"></script>
  <script>
    const movieList = {
      template: `
        <ul>
          <movieItem v-for="(movie, index) in movies" :key="index" :m="movie">{{movie}}</movieItem>
        </ul>
      `,
      data () {
        return {
          movies: [
            '电影1', '电影2', '电影3'
          ]
        }
      }
    }

    const movieItem = {
      template: `
        <li>{{m}}</li>
      `,
      props: ['m'],
      data () {
        return {
          // msg: '组件中的数据'
         
        }
      }      
    }

    Vue.component('movieList', movieList)
    Vue.component('movieItem', movieItem)


    const app = new Vue({
      el: '#app',
      data: {
        movies: [
          '电影1', '电影2', '电影3'
        ]
      }
    })
  
  </script>
</body>
</html>